<template>
  <div class="image-upload-demo">
    <section>
      <ZuiImageUploader />
    </section>
    <section>
      <h1>Readonly</h1>
      <ZuiImageUploader :modelValue="[{ name: '图片.jpg', uri: 'ddddd' }]" readonly />
    </section>
    <section>
      <h1>Readonly empty</h1>
      <ZuiImageUploader readonly />
    </section>
    <section>
      <h1>Loading</h1>
      <ZuiImageUploader loading />
    </section>
    <section>
      <h1>Edit Actions</h1>
      <ZuiImageUploader :modelValue="[{ name: '图片.jpg', uri: 'ddddd' }]" :edit-actions="['remove']" />
    </section>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
section {
  margin-top: 8px;
  background-color: #ffffff;
  padding: 20px;
  h1 {
    line-height: 32px;
    font-weight: bold;
  }
}
</style>
